<script setup lang='ts'>
import { ref } from 'vue';
import { delSlide, getSlide } from '@/api/axios/platformAxios';
// import { Picture as IconPicture } from '@element-plus/icons-vue'

// const value = ref([true,false,true,false])
const border = ref(true)

const form = ref({
    url: '',
    title: '',
    enable: '1',
    sort: '',
    operationType: '1',
    operationId: '',
    picture: '',
    id: ''
})

// 获取文章
const options = ref({})
getText().then(res => {
    // console.log(res);
    options.value = res.rows
})



const tableData = ref([])
function initSlide() {
    getSlide().then(res => {
        // console.log(res);

        tableData.value = res.rows

        tableData.value.map(item => {

            if (item.operationType === '1') {
                item.operationType = "内链"
            }else {
                item.operationType = "外链"
            }
        })

    })
}
initSlide()


import { ElMessageBox } from 'element-plus'

const dialogVisible = ref(false)

const handleClose = (done: () => void) => {
    ElMessageBox.confirm('确定关闭?')
        .then(() => {
            done()
        })
        .catch(() => {
            // catch error
        })
}

import { ElMessage } from 'element-plus'
import { Plus } from '@element-plus/icons-vue'

import type { UploadProps } from 'element-plus'
import { addSlide, editSlide, getText } from '@/views/platform/slideshow/getSlide';
import { getToken } from '@/utils/auth';

const imageUrl = ref('')

const handleAvatarSuccess: UploadProps['onSuccess'] = (
    response,
    uploadFile
) => {
    form.value.picture = response.url
}

// const beforeAvatarUpload: UploadProps['beforeUpload'] = (rawFile) => {
//     if (rawFile.type !== 'image/jpeg') {
//         ElMessage.error('Avatar picture must be JPG format!')
//         return false
//     } else if (rawFile.size / 1024 / 1024 > 2) {
//         ElMessage.error('Avatar picture size can not exceed 2MB!')
//         return false
//     }
//     return true
// }

//
const url = 'http://192.168.5.120:8090'

const slideData = ref({
    enable: "1",
    id: "",
    operationId: "",
    operationType: "",
    picture: "",
    url: ""
})
function beforeChange(status){
    slideData.value.id = status.id
    slideData.value.operationId = status.id
    slideData.value.picture = status.picture
    slideData.value.url = status.url

    if (status.operationType === "内链") {
        slideData.value.operationType = "1"
    }else {
        slideData.value.operationType = "0"
    }

    if(status.enable === '1'){
        slideData.value.enable = '0'
        editSlide(slideData.value).then(res => {
            console.log(res);
            ElMessage({
                type: 'success',
                message: '操作成功',
            })
        })
    }else{
        slideData.value.enable = '1'
        editSlide(slideData.value).then(res => {
            console.log(res);
            ElMessage({
                type: 'success',
                message: '操作成功',
            })
        })
    }
    initSlide()

    // status.enable = !status.enable
}
function switchValue(status){
    return status.enable === '1'
}

// 编辑
function edit(data) {
    // console.log(data.id);
    dialogVisible.value = true;
    form.value.picture = data.picture
    form.value.title = data.title
    form.value.id = data.id
}

// 添加图片

const baseUrl = import.meta.env.VITE_APP_BASE_API
const avatarUploadUrl =  baseUrl + "/common/upload"
const header = {
    "Authorization":'Bearer ' + getToken()
}

// 添加轮播图
function add() {
    form.value = {
        url: '',
        title: '',
        enable: '1',
        sort: '',
        operationType: '1',
        operationId: '1',
        picture: '',
        id: ''
    }
    dialogVisible.value = true
}
function save() {
    console.log(form.value.id);
    if (form.value.id){

        console.log('edit');
        editSlide(form.value).then(res => {
            console.log(res);
            initSlide()
            ElMessage({
                type: 'success',
                message: '操作成功',
            })
        })
        dialogVisible.value = false
        form.value = {
            url: '',
            title: '',
            enable: '1',
            sort: '',
            operationType: '1',
            operationId: '1',
            picture: '',
            id: ''
        }

    }else {
        console.log('add');

        form.value.operationType = '1'
        form.value.enable = '1'
        console.log(form.value);
        addSlide(form.value).then(res => {
            console.log(res);
            initSlide()
            ElMessage({
                type: 'success',
                message: '操作成功',
            })
        })
        dialogVisible.value = false
        form.value = {
            url: '',
            title: '',
            enable: '1',
            sort: '',
            operationType: '1',
            operationId: '',
            picture: '',
            id: ''
        }
    }
}

const ids = ref({
    ids: ''
})
// function del(data) {
//     console.log(data);
//     ids.value.ids = data.id
//
// }


const del = (data) => {
    ids.value.ids = data.id
    ElMessageBox.confirm(
        '此操作将永久删除, 是否继续?',
        '提示',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
        }
    )
        .then(() => {
            delSlide(ids.value).then(res => {
                console.log(res);
                initSlide()
            })
            ElMessage({
                type: 'success',
                message: '删除成功',
            })
        })
        .catch(() => {
            ElMessage({
                type: 'info',
                message: '已取消删除',
            })
        })
}

</script>

<template>
    <div style='margin: 20px 35px'>
        <el-button type="primary" @click="add">添加</el-button>
    </div>
    <div>
        <el-table :data="tableData" style="width: 95%;margin: 20px auto" :border=border >
            <el-table-column fixed type='index' label="序号" width='100' align='center'/>

            <el-table-column prop="image" label="轮播图片" align='center' width='428' class-name='pic' >

                <template #default="scope">

                    <el-image :src="url+scope.row.picture" style="width:300px;height:100px">
                    </el-image>
                </template>

            </el-table-column>

            <el-table-column prop="operationType" label="方式" align='center' />

            <el-table-column
                align="center"
                prop="changer"
                label="状态"
            >
                <template #default="scope">
<!--                    {{scope.row}}-->
                    <el-switch
                        :value="switchValue(scope.row)"
                        @change="beforeChange(scope.row)"
                    />
                </template>
            </el-table-column>

            <el-table-column prop="updateTime" label="更新时间" align='center'/>
            <el-table-column fixed="right" label="操作" align='center'>
                <template #default='scope'>
                    <el-button link type="primary" size="small" style='font-size: 13px' @click='edit(scope.row)'>编辑</el-button>
                    <el-button link type="primary" size="small" style='font-size: 13px' @click='del(scope.row)'>删除</el-button>
                </template>
            </el-table-column>
        </el-table>
    </div>

    <div>
        <el-dialog
            v-model="dialogVisible"
            title="添加"
            width="690"
            :before-close="handleClose"
        >
            <div class='dialog'>

                <el-form :model="form" label-width="auto" style="max-width: 600px">

                    <el-form-item label="封面图片">
                        <el-upload
                            class="avatar-uploader"
                            :action="avatarUploadUrl"
                            :show-file-list="false"
                            :on-success="handleAvatarSuccess"
                            :headers='header'
                        >
                            <img v-if="form.picture" :src="baseUrl+form.picture" class="avatar" />
                            <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
                        </el-upload>
                    </el-form-item>

                    <el-form-item>
                        <el-radio-group v-model="form.operationType" class="ml-4" >
                            <el-radio :value="form.operationType" :label='form.operationType' size="large" checked='checked'>内链</el-radio>
                        </el-radio-group>
                    </el-form-item>

                    <el-form-item label="选择跳转文章:">
                        <el-select v-model="form.title" placeholder="请选择" size="large"
                                   style="width: 205px">
                                <el-option
                                    v-for="item in options"
                                    :key="item.categoryId"
                                    :label="item.title"
                                    :value="item.categoryId"
                                />
                        </el-select>
                    </el-form-item>

                </el-form>

            </div>
            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="dialogVisible = false" size='large'>取消</el-button>
                    <el-button type="primary" @click="save" size='large'>
                        保存
                    </el-button>
                </div>
            </template>
        </el-dialog>
    </div>

</template>

<style lang='scss'>
.el-form-item__label{
    font-weight: normal !important;
}
.gap-4 {
    padding: 26px 25px;
    width: 100%;
    margin-left: 20px;
}
div.cell{
    //height: 50px;
    font-size: 14px;
    //line-height: 50px;
    //padding: 10px 0 !important;
    display: flex;
    justify-content: center;
    align-items: center;
}
.pic .cell {
    height: 70px !important;
}

.demo-image__error  {
    //padding: 30px 0;
    text-align: center;
    //border-right: solid 1px var(--el-border-color);
    display: inline-block;
    width: 300px;
    box-sizing: border-box;
    vertical-align: top;
    height: 100px;
}
.demo-image__error .demonstration {
    display: block;
    color: var(--el-text-color-secondary);
    font-size: 14px;
    //margin-bottom: 20px;
}
.demo-image__error .el-image {
    padding: 0 5px;
    max-width: 300px;
    max-height: 100px;
    width: 100%;
    height: 200px;
}

.el-dialog__header {
    background-color: #1892ff;
    margin-right: 0;

    .el-dialog__title {
        font-size: 18px;
        color: #fff;
    }

    .el-dialog__headerbtn .el-dialog__close {
        color: #fff !important;
    }
}

.demo-image__error .image-slot {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    background: var(--el-fill-color-light);
    color: var(--el-text-color-secondary);
    font-size: 30px;
}
.demo-image__error .image-slot .el-icon {
    font-size: 30px;
}

.dialog {
    padding: 30px 55px 0;
}

//上传头像

.avatar-uploader .avatar {
    width: 147px;
    height: 147px;
    display: block;
}
</style>

<style>
 .avatar-uploader .el-upload {
     border: 1px dashed var(--el-border-color);
     border-radius: 6px;
     cursor: pointer;
     position: relative;
     overflow: hidden;
     transition: var(--el-transition-duration-fast);
 }

.avatar-uploader .el-upload:hover {
    border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 147px;
    height: 147px;
    text-align: center;
}
</style>
